<template lang="pug">
.sidebar
  ul.sidebar-group(v-for="group in menus")
    .sidebar-group(v-for="colGroup in group" v-if="$route.meta.name === colGroup.metaName")
      .sidebar-group-title {{colGroup.label}}
      .sidebar-item-menu(
        v-for="item in colGroup.list"
        :key="item.id"
        v-if="item.children.length"
      )
        router-link.sidebar-item(
          v-for="children,index in item.children"
          :key="index"
          :to="{ name: children.routeName, query: { ...children.query }, params: { ...children.params } }"
          :class="{ 'router-link-active' : ($route.params.type ? $route.params.type : $route.meta.type) === children.routeName }"
        )
          .sidebar-item-bd {{children.label}}
      router-link.sidebar-item(
        v-for="item in colGroup.list"
        :key="item.id"
        :to="{ name: item.routeName, query: { ...item.query }, params: { ...item.params } }"
        :class="{ 'router-link-active' : ($route.params.type ? $route.params.type : $route.meta.type) === item.routeName }"
        v-if="!item.children.length"
      )
        .sidebar-item-bd {{item.label}}
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'lowerSidebar',
  computed: {
    ...mapState({
      lowerSidebarShow: state => state.ui.lowerSidebar.show,
      cHost: state => state.user.user.c_host
    })
  },
  data () {
    return {
      menus: [
        [
          {
            metaName: 'indexManage',
            label: '首页管理',
            list: [
              {
                routeName: 'indexBanner',
                label: '首页轮播图',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'indexStyles',
                label: '业态管理',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'indexActivity',
                label: '活动设置',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'indexCase',
                label: '经典案例设置',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'indexSupplier',
                label: '品质材料商设置',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'indexMaterial',
                label: '热门材料设置',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'brandManage',
            label: '品牌管理',
            list: [
              {
                routeName: 'brandBase',
                label: '品牌库',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'audit',
                label: '品牌列表',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'userManage',
            label: '用户管理',
            list: [
              {
                routeName: 'userDesigner',
                label: '设计师用户',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'userSupplier',
                label: '供应商用户',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'materialManage',
            label: '材料管理',
            list: [
              {
                routeName: 'material',
                label: '材料列表',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'materialCategory',
                label: '材料分类',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'findMaterial',
                label: '找材料列表',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'systemManage',
            label: '系统管理',
            list: [
              {
                routeName: 'systemLog',
                label: '日志管理',
                query: {},
                params: {},
                children: []
              }, {
                routeName: 'systemDictionary',
                label: '字典管理',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'puzzle',
            label: '电子拼版',
            list: [
              {
                routeName: 'puzzleTemplate',
                label: '模板设置',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'puzzleList',
                label: '拼版列表',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'otherManage',
            label: '其他管理',
            list: [
              {
                routeName: 'otherCase',
                label: '案例列表',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'order',
                label: '订单管理',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'books',
                label: '白皮书管理',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'supplierStorage',
                label: '供应商入库管理',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'personManage',
            label: '人员管理',
            list: [
              {
                routeName: 'memberManage',
                label: '成员管理',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'roleManage',
                label: '角色管理',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ],
        [
          {
            metaName: 'appletsManage',
            label: '小程序管理',
            list: [
              {
                routeName: 'homeRecManage',
                label: '首页推荐设置',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'hotSupplierManage',
                label: '分类热门商家设置',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'shareManage',
                label: '分享设置',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'materialImgManage',
                label: '材料分类图片设置',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'suggestionManage',
                label: '意见反馈',
                query: {},
                params: {},
                children: []
              }
            ]
          },
          {
            metaName: 'appletsManage',
            label: '名师管理',
            list: [
              {
                routeName: 'articleManage',
                label: '名师文章管理',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'teacherMaterial',
                label: '素材库',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'teacherDraft',
                label: '草稿箱',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'teacherCategory',
                label: '文章分类管理',
                query: {},
                params: {},
                children: []
              }
            ]
          }
        ],
        [
          {
            metaName: 'storeroomManage',
            label: '仓库管理',
            list: [
              {
                routeName: 'storeSample',
                label: '样品列表',
                query: {},
                params: {},
                children: []
              },
              {
                routeName: 'storeroomStorage',
                label: '样品入库',
                query: {},
                params: {},
                children: []
              }
            ]
          },
        ]
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.sidebar {
  width: 160px;
  height: 100%;
  flex-shrink: 0;
  padding-top: 20px;
  background: #FFFFFF;
  box-shadow: 5px 0px 10px 0px rgba(0, 0, 0, 0.05);
}
.sidebar-item {
  width: 100%;
  padding: 0 16px;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.sidebar-group-title {
  width: 100%;
  padding: 10px 30px;
  margin-bottom: 10px;
  line-height: 20px;
  color: #B2B4C7;
}
.sidebar-item-menu {
  width: 100%;
  cursor: pointer;
}
.sidebar-item-title {
  display: flex;
  align-items: center;
  height: 50px;
  padding-left: 24px;
  font-size: 14px;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #333333;
  line-height: 20px;
}
.sidebar-item-bd {
  width: 100%;
  height: 100%;
  padding: 10px 0;
  font-size: 13px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #64698F;
  line-height: 18px;
  display: flex;
  align-items: center;
  padding-left: 14px;
}
.router-link-active {
  .sidebar-item-bd {
    position: relative;
    background: #FFF5F8;
    border-radius: 5px;
    color: #ED5B75;
    font-weight: 600;
    // &:after {
    //   content: '';
    //   position: absolute;
    //   right: 5px;
    //   width: 0;
    //   height: 0;
    //   border-width: 5px 7px;
    //   border-style: solid;
    //   border-color: transparent transparent transparent #0F73E6;
    // } 
  }
}
</style>
